import React, {useEffect, useState} from 'react';
import {Form, Input, Button, Select, Row, Col} from 'antd';
import type {ProductSearchParams} from './data';
import {listCategory} from "@/pages/basicdata/product-category/api";
import {listBrand} from "@/pages/basicdata/brand-list/api";
import {listModalTypeAPI} from "@/pages/basicdata/spec-list/api";
import {API} from "@/services/typings";

const {Option} = Select;

interface ProductSearchFormProps {
  initialValues?: Partial<ProductSearchParams>;
  onSearch: (values: Partial<ProductSearchParams>) => void;
  showSearch?: boolean | { brand: boolean; category: boolean; returnTong: boolean; name: boolean }; // 是否显示搜索区域
  form: any;
}

const ProductSearchForm: React.FC<ProductSearchFormProps> = ({initialValues, onSearch, showSearch, form}) => {
  // const [form] = Form.useForm();
  const [allCategories, setAllCategories] = useState<API.IProductCategory[]>([]);
  const [allBrands, setAllBrands] = useState<API.IProductBrand[]>([]);

  const handleReset = () => {
    form.resetFields();
    onSearch({});
  };

  const initData = async () => {
    const {data: categories}: { data: API.IProductCategory[] } = await listCategory({})
    setAllCategories(categories)
    const {data: brands}: { data: API.IProductBrand[] } = await listBrand({})
    setAllBrands(brands)
  }

  useEffect(() => {
    initData()
  }, []);

  return (
    <Form
      form={form}
      initialValues={initialValues}
      onFinish={onSearch}
      layout="inline"
    >
      <Row gutter={0} style={{width: '100%'}}>
        <Col span={6}>
          <Form.Item name="productName" label="商品名称" labelCol={{span: 8}}>
            <Input placeholder="请输入商品名称" allowClear/>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="categoryId" label="商品分类" labelCol={{span: 8}}>
            <Select
              placeholder="请选择分类"
              allowClear
              options={allCategories?.map((item) => ({
                value: item.id,
                label: item.label
              }))}
            />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="brandId" label="商品品牌" labelCol={{span: 8}}>
            <Select
              placeholder="请选择品牌"
              allowClear
              options={allBrands?.map((item) => ({
                value: item.id,
                label: item.name
              }))}
            />
          </Form.Item>
        </Col>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          <Button style={{marginLeft: 8}} onClick={handleReset}>
            重置
          </Button>
        </Form.Item>
      </Row>
    </Form>
  );
};

export default ProductSearchForm;
